
// 存储所有的绘制图形
const shapes = []
// 
let cvs = null,
    ctx = null, 
    data = null

function init_draw(obj) {
    cvs = obj.cvs
    ctx = obj.ctx
    data = obj.data

    cvs.width = 900
    cvs.height = 400

    cvs.onmousedown = handleMouseDown
    cvs.oncontextmenu = handleContextmenu
    cvs.onwheel = handleWheel
    // cvs.addEventListener('mousedown', handleMouseDown)
    // cvs.addEventListener('wheel', handleWheel)

    const shape = new RectDraw({}, '#f40', 10, 10, 100, 100)
    shapes.push(shape)
    
    draw()
}

// ========================================================== 获取点击到的图形
function getShape(x, y) {
    for (let i = shapes.length - 1; i >= 0; i--) {
        if (shapes[i].isInside(x, y)) {
            return shapes[i]
        }
    }
    return null
}
// ========================================================== 绘制事件
function draw() {
    requestAnimationFrame(draw)
    ctx.clearRect(0, 0, cvs.width, cvs.height)
    for (const s of shapes) {
        s.draw()
    }
}
// ========================================================== 鼠标事件
// 鼠标左键事件
const handleMouseDown = (event) => {
    console.log(event.button)
    const rect = cvs.getBoundingClientRect()
    const clickX = event.clientX - rect.left
    const clickY = event.clientY - rect.top
    const shape = getShape(clickX, clickY)
    if (!shape) {
        console.log('没获取到')
    } else {
        switch (event.button) {
            case 0:
                leftClick({
                    shape: shape,
                    rect: rect,
                    clickX: clickX,
                    clickY: clickY
                })
                break
            case 2:
                rightClick(shape)
                break
        }
    }
}
// 左键事件
function leftClick(obj) {
    const { startX, startY } = obj.shape
    window.onmousemove = (e) => {
        const disX = e.clientX - obj.rect.left - obj.clickX
        const disY = e.clientY - obj.rect.top - obj.clickY
        obj.shape.startX = startX + disX
        obj.shape.startY = startY + disY
    }
    window.onmouseup = (e) => {
        window.onmousemove = null
        window.onmouseup = null
    }
}
// 右键事件
function rightClick(shape) {
    console.log(shape)
}
// 鼠标右键事件
const handleContextmenu = (event) => {
    event.preventDefault()
}
// 鼠标滚轮滚动
const handleWheel = (event) => {
    console.log('handleWheel')
    if (event.deltaY > 0) {
        console.log(`向下滚动${event.deltaY}`)
    } else {
        console.log(`向上滚动${event.deltaY}`)
    }
}
// ==========================================================构造绘制图形的类
class RectDraw {
    constructor(data, color, startX, startY, width, height) {
        this.data = data
        this.color = color
        this.startX = startX
        this.startY = startY
        this.width = width
        this.height = height
    }
    get endX() {
        return this.startX + this.width
    }
    get endY() {
        return this.startY + this.height
    }
    draw() {
        ctx.beginPath()
        ctx.moveTo(this.startX, this.startY)
        ctx.lineTo(this.startX, this.endY)
        ctx.lineTo(this.endX, this.endY)
        ctx.lineTo(this.endX, this.startY)
        ctx.lineTo(this.startX, this.startY)
        ctx.fillStyle = this.color
        ctx.fill()
        ctx.strokeStyle = '#000'
        ctx.lineCap = 'square'
        ctx.lineWidth = 3
        ctx.stroke()
    }
    isInside(x, y) {
        return x > this.startX && x < this.endX && y > this.startY && y < this.endY
    }
}

export default {
    init_draw
}